<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title>Streetview Mapsicle</title>
    <script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxQGj0PqsCtxKvarsoS-iqLdqZSKfxRdmoPmGl7Y9335WLC36wIGYa6o5Q&amp;sensor=false"></script>
    <script type="text/javascript">
      google.load("maps","2");
    </script>
    <style type="text/css">
      .my_funky_demo_window{
        border: 1px solid #004879;
        width: 200px;
        height:100px;
        background-color: #ccc;
        padding:5px;
        text-align:center;
        font-family: Helvetica,Arial,sans-serif;
      }
      .my_funky_demo_window h3{
        margin:0;
        font-size:11pt;
      }
      .my_funky_demo_window span{
        font-size:9pt;
      }
      .my_funky_demo_window img{
        vertical-align:middle;
        margin-right:5px;
      }
    </style>
    <script type="text/javascript">
      //<![CDATA[
      document.write('<script type="text/javascript" src="../src/mapsicle' + (document.location.search.indexOf('packed') > -1 ? '_packed' : '') + '.js"><' + '/script>');
      //]]>
    </script>     
    <script type="text/javascript">
      //<![CDATA[
      var mapsicle;
      function init(){
        mapsicle = new Mapsicle(document.getElementById("mapsicle_div"), new GLatLng(40.756634, -73.986271));
        var custom_box = document.createElement('div');
        custom_box.className = "my_funky_demo_window";
        custom_box.innerHTML = "<h3><img src='images/mapsicle_marker_sm.png' />Streetview Mapsicle</h3><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquam.</span>";
        var info =  new SVCustomInfoWindow({
          inner: custom_box, 
          width: 200,
          height:100,
          overlayAnchor: new GPoint(20, 40)
        });
        var location = new SVLocation({
          name:"MAPSICLE",
          lat:40.75789,
          lng:-73.985716,
          info:info
        });
        mapsicle.addLocation(location);
      }
      //]]>
    </script>
  </head>
  <body onload="init();" onunload="GUnload()">
    <p><a href="?packed">Packed</a>&nbsp;|&nbsp;<a href="?">Unpacked</a> version of the script.</p>
    <div id="mapsicle_div" style="width:850px;height:400px;"></div>
  </body>
</html>
